<template>
        <div class="left">
        <el-row :gutter="25">
          <el-col :span="10">
            <el-input placeholder="请输入搜索内容" >
          <el-button slot="append" icon="el-icon-search"
          ></el-button>
        </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getFindCarList()" >空车位查询{{this.$route.query.username}}</el-button>
        </el-col>
          <el-table :visible.sync="editDialogVisible" :data="carlist"  style="hight: 200px"
                    border stripe>
            <el-table-column type="index" ></el-table-column>
            <el-table-column label="停车号" prop="name"></el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- 修改 -->
                <el-button type="primary"  size="mini" @click="yd(scope.row.name)">空车位预定</el-button>
                <!-- 删除 -->


              </template>
            </el-table-column>
          </el-table>
          <el-table :visible.sync="editDialogVisible" :data="user"  style="hight: 200px"
                    border stripe>
            <el-table-column type="index" ></el-table-column>
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="密码" prop="password"></el-table-column>
            <el-table-column label="角色" prop="role"></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- 修改 -->
                <el-button type="primary"  size="mini" @click="yd(scope.row.name)">VIP缴费</el-button>
                <!-- 删除 -->


              </template>
            </el-table-column>
          </el-table>

      </el-row>
        </div>
</template>

<script>
  export default {
    created (){
      this.getUserList();
      this.getmeanList();
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    data(){


      return{
        //查询信息实体
        queryInfo:{
          query:"",//查询信息
          pageNum: 1,//当前页
          pageSize: 5,//每页最大数
        },
        cz:this.$route.query.username,
        user:[],
        carlist:[],
        meanlistqian:[],
        userlist:[],//用户列表
        total:0,//总记录数
        // 控制修改用户对话框显示/隐藏
        editDialogVisible:false,
        addDialogVisible: false,
        // 被激活的连接
        activePath: '/userqian',
        // 添加用户表单项
        addForm: {
          username:'',
          password:'',

          carnumber:'',
        },


        // 修改用户信息
        editForm:{},
        // 验证规则
        addFormRules:{
          // 添加用户表单验证规则
          username:[
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
          ],
          password:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
        // 修改用户表单验证规则
        editFormRules:{
          password:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
      }

    },
    methods:{
      async getUserList() {

        const { data: res } = await this.$http.get("txtqian");
        this.userlist = res.data;
        this.user=res.user;

      },

      async getmeanList(){
        const { data: res } = await this.$http.get("meanqian");
        this.meanlistqian = res.data;
      },
      async getFindCarList() {
        // 调用post请求
        const { data: res } = await this.$http.get("txtfindcarkong");
        this.carlist = res.data; // 将返回数据赋值
        // this.total = res.numbers; // 总个数
        // console.log(queryInfo);



      },
      async findme(){

        const { data: res } = await this.$http.post(
          `findme?username=${this.$route.query.username}`
        );
        this.user = res.data;


      },
      savePath (activePath) {
        window.sessionStorage.setItem('activePath', activePath)
        this.activePath = activePath
      },
      // 展示修改框
      async showEditDialog(){


        // if (res != "success") {
        // userinfo.state = !userinfo.state;
        // return this.$message.error("操作失败！！！");
        // }
        // this.$message.success("操作成功！！！");


        this.editDialogVisible = true;//编辑菜单开启
      },
      // 关闭窗口,重置信息
      editDialogClosed(){
        this.$refs.editFormRef.resetFields();
      },
      // 确认修改
      editUserInfo(){
        this.$refs.editFormRef.validate(async valid =>{//表单验证
          console.log(valid);
          if( !valid ) return;
          // 发起请求
          const {data:res} = await this.$http.put("editUserqian",this.editForm);
          console.log(res);
          if (res != "success") return this.$message.error("操作失败！！！");
          this.$message.success("操作成功！！！");
          //隐藏
          this.editDialogVisible = false;
          this.getUserList();
        });
      },
    }

  }
</script>

<style scoped>
  .el-tag{
    font-size: 30px;

  }
  .right{
    background-color: #B3C0D1;
    width: 300px;
    height: 400px;
    position: absolute;
    left: 800px;
    float: left;
    text-align: center;
    font-size: 40px;
    color: blanchedalmond;
    background: url("../assets/11.png") no-repeat;

  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .left{
    background-color: #B3C0D1;
    width: 900px;
    height: 800px;
    position: absolute;
    left: 100px;
  }

  .el-header, .el-footer {
    height: 200px;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    height: 600px;
  }
  .el-gg{

    background-color: #B3C0D1;

  }


</style>
